<template>
	<view class="restaurant">
		<!-- 搜索框 -->
		<view class="search-box">
			<view class="loaction">
				<view class="sy">
					<image src="/static/wine-index/sy_icon_dw.png" />
				</view>
				<view>{{upress || '邯郸'}}</view>
				<view class="city">
					<image src="/static/wine-index/loaction.png" />
				</view>
			</view>
			<view class="search" @tap="toSrearch">
				<view class="icon">
					<image src="/static/images/search.png" />
				</view>
				<view class="text">{{searchContent ? searchContent : '在酒里周年庆秒杀场'}}</view>
			</view>
		</view>
		<view class="restaurant_tags">
			<view class="restaurant_tags_item" :class="restaurantTags == 1 ? 'active' : ''" @tap="restaurantBtn(1)">
				<view class="canting_img">
					<img :src="restaurantTags == 1 ? '/static/restaurant/canting-r.png' : '/static/restaurant/canting.png'"
						alt="">
				</view>
				<view class="">
					堂食
				</view>
			</view>
			<view class="restaurant_tags_item" :class="restaurantTags == 2 ? 'active' : ''" @tap="restaurantBtn(2)">
				<view class="waimai_img">
					<img :src="restaurantTags == 2 ? '/static/restaurant/waimai-r.png' : '/static/restaurant/waimai.png'"
						alt="">
				</view>
				<view class="">
					外卖
				</view>
			</view>
			<view class="restaurant_tags_item" :class="restaurantTags == 3 ? 'active' : ''" @tap="restaurantBtn(3)">
				<view class="yuding_img">
					<img :src="restaurantTags == 3 ? '/static/restaurant/yuding-r.png' : '/static/restaurant/yuding.png'"
						alt="">
				</view>
				<view class="">
					预定
				</view>
			</view>
		</view>
		<view v-show="restaurantTags != 3" class="canClass_tags">
			<view class="canClass_item">
				<view class="scrollView" style="width: 100%; height: 100%;">
					<view class="scroll_class">
						<view :class="scrollView == 1 ? 'canActive' : ''" class="canClass_name" @tap="scrollViewBtn(1)">
							中餐</view>
						<view :class="scrollView == 2 ? 'canActive' : ''" class="canClass_name" @tap="scrollViewBtn(2)">
							西餐</view>
						<view class="canClass_name">汉堡</view>
						<view class="canClass_name">奶茶</view>
						<view class="canClass_name">自助</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="restaurantTags == 3" class="canClass_tags_twe">
			<view class="canClass_item">
				<view class="scrollView" style="width: 100%; height: 100%;">
					<view v-show="restaurantTags != 3" class="scroll_class">
						<view class="canChangJing">
							就餐场景：
						</view>
						<view :class="scrollView == 1 ? 'canActive' : ''" class="canClass_name" @tap="scrollViewBtn(1)">
							西餐
						</view>
						<view :class="scrollView == 2 ? 'canActive' : ''" class="canClass_name" @tap="scrollViewBtn(2)">
							汉堡</view>
						<view class="canClass_name">奶茶</view>
						<view class="canClass_name">自助</view>
						<view class="canClass_name">汉堡</view>
						<view class="canClass_name">奶茶</view>
						<view class="canClass_name">自助</view>
						<view class="canClass_name">汉堡</view>
						<view class="canClass_name">奶茶</view>
						<view class="canClass_name">自助</view>
					</view>
				</view>
			</view>
		</view>
		<view class="first_tags">
			<view class="first_main">
				<view class="first_main_item">
					<view class="distance">
						距离优先
					</view>
					<view class="distance_Btn">
						<img class="distance_Btn_up" src="/static/restaurant/up.png" alt="">
						<img class="distance_Btn_down" src="/static/restaurant/down.png" alt="">
					</view>
				</view>
				<view class="first_main_item">
					<view class="price_box">
						价格优先
					</view>
					<view class="price_Btn">
						<img class="price_Btn_up" src="/static/restaurant/up.png" alt="">
						<img class="price_Btn_down" src="/static/restaurant/down.png" alt="">
					</view>
				</view>
				<view class="first_main_item">
					<view class="score">
						评分优先
					</view>
					<view class="score_Btn">
						<img class="score_Btn_up" src="/static/restaurant/up.png" alt="">
						<img class="score_Btn_down" src="/static/restaurant/down.png" alt="">
					</view>
				</view>
				<view class="first_main_item">
					<view class="sales">
						销量优先
					</view>
					<view class="sales_Btn">
						<img class="sales_Btn_up" src="/static/restaurant/up.png" alt="">
						<img class="sales_Btn_down" src="/static/restaurant/down.png" alt="">
					</view>
				</view>
			</view>
		</view>

		<view class="restaurant_list">
			<view class="restaurant_main">
				<view class="restaurant_item">
					<view class="img">
						<img src="" alt="">
					</view>
					<view class="restaurant_item_right">
						<view class="item_right_title_distance">
							<view class="title">
								和苑·特色炒菜美食店
							</view>
							<view class="distance">
								1.6KM
							</view>
						</view>
						<view class="score_box">
							<view class="score">
								<view class="imgs">
									<img src="/static/restaurant/xing.png" alt="">
								</view>
								<view class="imgs">
									<img src="/static/restaurant/xing.png" alt="">
								</view>
								<view class="imgs">
									<img src="/static/restaurant/xing.png" alt="">
								</view>
								<view class="imgs">
									<img src="/static/restaurant/xing.png" alt="">
								</view>
								<view class="imgs">
									<img src="/static/restaurant/banxing.png" alt="">
								</view>
							</view>
							<view class="select">
								轻奢
							</view>
						</view>
						<view class="typesOf">
							<view class="material">
								原材料精选
							</view>
							<view class="kitchen">
								智慧厨房
							</view>
							<view class="shop">
								吧台店铺
							</view>
						</view>
						<view class="address_content">
							丛台区1111联防东路 111人民1111大院西侧 1111128号…
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				restaurantTags: 1,
				jiuTags: 1,
				scrollView: 0,
				screenSort: 1,
				screenCommodity: 0,
				screenPrice: 0,
			}
		},
		methods: {
			restaurantBtn(id) {
				this.restaurantTags = id
			},
			jiuBtn(id) {
				this.jiuTags = id
			},
			scrollViewBtn(id) {
				this.scrollView = id
			},
			screenSortBtn(id) {
				this.screenSort = id
			},
			screenCommodityBtn(id) {
				this.screenCommodity = id
			},
			screenPriceBtn(id) {
				this.screenPrice = id
			},
		}
	}
</script>

<style>
	@import './restaurant.css'
</style>